<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<text class="header-title">订单详情</text>
			<view class="share-btn" @click="shareOrder">
				<text class="share-icon">📤</text>
			</view>
		</view>

		<scroll-view class="content" scroll-y="true">
			<!-- 订单状态 -->
			<view class="status-card">
				<view class="status-header">
					<view class="status-badge" :class="order.status">
						{{getStatusText(order.status)}}
					</view>
					<view class="urgent-tag" v-if="order.isUrgent">紧急</view>
				</view>
				<text class="order-id">订单号：{{order.id}}</text>
				<text class="publish-time">发布时间：{{order.publishTime}}</text>
			</view>

			<!-- 宠物信息 -->
			<view class="pet-card">
				<view class="card-header">
					<text class="card-title">🐾 宠物信息</text>
				</view>
				<view class="pet-info">
					<view class="pet-avatar">
						<image class="pet-image" :src="order.petImage" mode="aspectFill"></image>
						<text class="pet-type-icon">{{order.petTypeIcon}}</text>
					</view>
					<view class="pet-details">
						<view class="pet-name-row">
							<text class="pet-name">{{order.petName}}</text>
							<text class="pet-gender">{{order.petGender}}</text>
						</view>
						<text class="pet-breed">{{order.petBreed}} · {{order.petAge}}</text>
						<text class="pet-weight">体重：{{order.petWeight}}</text>
						<view class="pet-traits">
							<text class="trait-tag" v-for="trait in order.petTraits" :key="trait">{{trait}}</text>
						</view>
					</view>
				</view>
				<view class="pet-notes" v-if="order.petNotes">
					<text class="notes-title">特殊说明：</text>
					<text class="notes-content">{{order.petNotes}}</text>
				</view>
			</view>

			<!-- 服务需求 -->
			<view class="service-card">
				<view class="card-header">
					<text class="card-title">🛠️ 服务需求</text>
				</view>
				<text class="service-title">{{order.serviceTitle}}</text>
				<view class="service-list">
					<view class="service-item" v-for="service in order.services" :key="service.name">
						<view class="service-icon">{{service.icon}}</view>
						<view class="service-info">
							<text class="service-name">{{service.name}}</text>
							<text class="service-desc" v-if="service.description">{{service.description}}</text>
						</view>
					</view>
				</view>
				<view class="service-requirements" v-if="order.serviceRequirements">
					<text class="requirements-title">具体要求：</text>
					<text class="requirements-content">{{order.serviceRequirements}}</text>
				</view>
			</view>

			<!-- 时间地点 -->
			<view class="location-card">
				<view class="card-header">
					<text class="card-title">📍 时间地点</text>
				</view>
				<view class="time-info">
					<view class="info-row">
						<text class="info-label">服务时间：</text>
						<text class="info-value">{{order.serviceTime}}</text>
					</view>
					<view class="info-row">
						<text class="info-label">服务时长：</text>
						<text class="info-value">{{order.serviceDuration}}</text>
					</view>
				</view>
				<view class="location-info">
					<view class="location-row">
						<text class="location-text">{{order.address}}</text>
						<text class="distance">距离 {{order.distance}}</text>
					</view>
					<view class="map-container" @click="openMap">
						<map class="mini-map" 
							 :latitude="order.latitude" 
							 :longitude="order.longitude"
							 :markers="mapMarkers"
							 :enable-scroll="false"
							 :enable-zoom="false">
						</map>
						<view class="map-overlay">
							<text class="map-hint">点击查看大图</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 报酬信息 -->
			<view class="payment-card">
				<view class="card-header">
					<text class="card-title">💰 报酬信息</text>
				</view>
				<view class="payment-info">
					<view class="price-row">
						<text class="price-label">服务报酬：</text>
						<view class="price-value">
							<text class="price">¥{{order.price}}</text>
							<text class="price-unit">/{{order.priceUnit}}</text>
						</view>
					</view>
					<view class="payment-method">
						<text class="method-label">支付方式：</text>
						<text class="method-value">{{order.paymentMethod}}</text>
					</view>
					<view class="payment-note" v-if="order.paymentNote">
						<text class="note-content">{{order.paymentNote}}</text>
					</view>
				</view>
			</view>

			<!-- 主人信息 -->
			<view class="owner-card">
				<view class="card-header">
					<text class="card-title">👤 主人信息</text>
				</view>
				<view class="owner-info">
					<view class="owner-avatar">
						<image class="avatar-image" :src="order.ownerAvatar" mode="aspectFill"></image>
						<view class="verified-badge" v-if="order.ownerVerified">✓</view>
					</view>
					<view class="owner-details">
						<text class="owner-name">{{order.ownerName}}</text>
						<view class="owner-stats">
							<text class="stat-item">⭐ {{order.ownerRating}}</text>
							<text class="stat-item">📝 {{order.ownerOrders}}单</text>
						</view>
						<text class="owner-join">{{order.ownerJoinTime}}加入</text>
					</view>
					<view class="contact-actions">
						<view class="contact-btn" @click="callOwner">
							<text class="contact-icon">📞</text>
						</view>
						<view class="contact-btn" @click="messageOwner">
							<text class="contact-icon">💬</text>
						</view>
					</view>
				</view>
				<view class="owner-reviews" v-if="order.ownerReviews && order.ownerReviews.length > 0">
					<text class="reviews-title">最近评价：</text>
					<view class="review-item" v-for="review in order.ownerReviews.slice(0, 2)" :key="review.id">
						<view class="review-header">
							<text class="reviewer-name">{{review.reviewerName}}</text>
							<text class="review-rating">⭐ {{review.rating}}</text>
						</view>
						<text class="review-content">{{review.content}}</text>
					</view>
				</view>
			</view>

			<!-- 安全提示 -->
			<view class="safety-card">
				<view class="card-header">
					<text class="card-title">🛡️ 安全提示</text>
				</view>
				<view class="safety-tips">
					<text class="tip-item">• 首次服务建议与主人当面交接</text>
					<text class="tip-item">• 服务过程中请拍照记录</text>
					<text class="tip-item">• 如遇紧急情况请及时联系主人</text>
					<text class="tip-item">• 完成服务后请及时确认订单</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-actions" v-if="order.status === 'pending'">
			<button class="btn-contact" @click="contactOwner">联系主人</button>
			<button class="btn-accept" @click="acceptOrder">立即接单</button>
		</view>

		<view class="bottom-actions" v-else-if="order.status === 'accepted'">
			<button class="btn-cancel" @click="cancelOrder">取消订单</button>
			<button class="btn-start" @click="startService">开始服务</button>
		</view>

		<view class="bottom-actions" v-else-if="order.status === 'in_progress'">
			<button class="btn-contact" @click="contactOwner">联系主人</button>
			<button class="btn-complete" @click="goToServiceExecute">执行服务</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderId: '',
			order: {
				id: 'PET202401001',
				status: 'pending', // pending, accepted, in_progress, completed, cancelled
				isUrgent: true,
				publishTime: '2024-01-15 14:30',
				
				// 宠物信息
				petName: '小咪',
				petTypeIcon: '🐱',
				petBreed: '英国短毛猫',
				petAge: '2岁',
				petGender: '♀',
				petWeight: '4.5kg',
				petImage: '/static/pet-placeholder.jpg',
				petTraits: ['温顺', '亲人', '已绝育'],
				petNotes: '小咪比较胆小，第一次见面可能会躲起来，需要耐心一些。喜欢吃小鱼干作为零食。',
				
				// 服务信息
				serviceTitle: '需要喂食和清理猫砂',
				services: [
					{name: '喂食', icon: '🍽️', description: '早晚各一次，猫粮已准备好'},
					{name: '清理猫砂', icon: '🧹', description: '清理猫砂盆，更换新猫砂'},
					{name: '陪玩', icon: '🎾', description: '陪伴玩耍15-20分钟'}
				],
				serviceRequirements: '请在每次喂食后拍照确认，猫砂清理后也请拍照。如果小咪有异常情况请及时联系我。',
				
				// 时间地点
				serviceTime: '今天 18:00 - 19:00',
				serviceDuration: '约1小时',
				address: '北京市朝阳区三里屯SOHO 2号楼1201',
				distance: '500m',
				latitude: 39.918823,
				longitude: 116.407470,
				
				// 报酬信息
				price: 50,
				priceUnit: '次',
				paymentMethod: '微信支付',
				paymentNote: '服务完成后立即支付',
				
				// 主人信息
				ownerName: '李小姐',
				ownerAvatar: '/static/avatar-placeholder.jpg',
				ownerVerified: true,
				ownerRating: 4.8,
				ownerOrders: 23,
				ownerJoinTime: '2023年6月',
				ownerReviews: [
					{
						id: 1,
						reviewerName: '张师傅',
						rating: 5,
						content: '主人很好沟通，宠物很乖，环境整洁，推荐！'
					},
					{
						id: 2,
						reviewerName: '王阿姨',
						rating: 5,
						content: '小咪很可爱，主人准备很充分，服务很愉快。'
					}
				]
			}
		}
	},
	computed: {
		mapMarkers() {
			return [{
				id: 1,
				latitude: this.order.latitude,
				longitude: this.order.longitude,
				iconPath: '/static/marker-home.png',
				width: 30,
				height: 30
			}]
		}
	},
	onLoad(options) {
		if (options.id) {
			this.orderId = options.id
			this.loadOrderDetail()
		}
	},
	methods: {
		// 加载订单详情
		loadOrderDetail() {
			// 模拟API调用
			console.log('加载订单详情:', this.orderId)
			// 这里应该调用实际的API
		},
		
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				pending: '待接单',
				accepted: '已接单',
				in_progress: '服务中',
				completed: '已完成',
				cancelled: '已取消'
			}
			return statusMap[status] || '未知状态'
		},
		
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 分享订单
		shareOrder() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				href: `pages/order-detail/order-detail?id=${this.order.id}`,
				title: `宠物服务订单 - ${this.order.petName}`,
				summary: this.order.serviceTitle,
				imageUrl: this.order.petImage
			})
		},
		
		// 打开地图
		openMap() {
			uni.openLocation({
				latitude: this.order.latitude,
				longitude: this.order.longitude,
				name: '服务地址',
				address: this.order.address
			})
		},
		
		// 拨打电话
		callOwner() {
			uni.makePhoneCall({
				phoneNumber: '13800138000'
			})
		},
		
		// 发送消息
		messageOwner() {
			uni.navigateTo({
				url: `/pages/chat/chat?userId=${this.order.ownerId}&userName=${this.order.ownerName}`
			})
		},
		
		// 联系主人
		contactOwner() {
			uni.showActionSheet({
				itemList: ['拨打电话', '发送消息'],
				success: (res) => {
					if (res.tapIndex === 0) {
						this.callOwner()
					} else if (res.tapIndex === 1) {
						this.messageOwner()
					}
				}
			})
		},
		
		// 接单
		acceptOrder() {
			uni.showModal({
				title: '确认接单',
				content: `确定要接受这个订单吗？\n服务时间：${this.order.serviceTime}\n服务报酬：¥${this.order.price}`,
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({title: '接单中...'})
						setTimeout(() => {
							uni.hideLoading()
							this.order.status = 'accepted'
							uni.showToast({title: '接单成功', icon: 'success'})
						}, 1500)
					}
				}
			})
		},
		
		// 取消订单
		cancelOrder() {
			uni.showModal({
				title: '取消订单',
				content: '确定要取消这个订单吗？取消后将无法恢复。',
				success: (res) => {
					if (res.confirm) {
						this.order.status = 'cancelled'
						uni.showToast({title: '订单已取消', icon: 'success'})
					}
				}
			})
		},
		
		// 开始服务
		startService() {
			uni.showModal({
				title: '开始服务',
				content: '确认已到达服务地点，开始为宠物提供服务？',
				success: (res) => {
					if (res.confirm) {
						this.order.status = 'in_progress'
						uni.showToast({title: '服务已开始', icon: 'success'})
					}
				}
			})
		},
		
		// 跳转到服务执行页
		goToServiceExecute() {
			uni.navigateTo({
				url: `/pages/service-execute/service-execute?orderId=${this.order.id}`
			})
		},
		
		// 完成服务
		completeService() {
			uni.showModal({
				title: '完成服务',
				content: '确认已完成所有服务项目？完成后请等待主人确认。',
				success: (res) => {
					if (res.confirm) {
						this.order.status = 'completed'
						uni.showToast({title: '服务已完成', icon: 'success'})
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.container {
	background: linear-gradient(135deg, #F5F5F5 0%, #F0F8FF 100%);
	height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 顶部导航 */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background: linear-gradient(135deg, white 0%, #FFF8DC 100%);
	border-bottom: 2rpx solid #E0E0E0;
	box-shadow: var(--shadow-light);
}

.back-btn,
.share-btn {
	width: 65rpx;
	height: 65rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #F0F0F0;
	transition: all 0.3s ease;
	box-shadow: var(--shadow-light);
}

.back-icon,
.share-icon {
	font-size: 26rpx;
	color: #666;
	font-weight: 600;
}

.header-title {
	font-size: 32rpx;
	font-weight: bold;
	color: var(--text-primary);
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
}

/* 内容区域 */
.content {
	flex: 1;
	padding: 20rpx;
	background: transparent;
}

/* 卡片通用样式 */
.status-card,
.pet-card,
.service-card,
.location-card,
.payment-card,
.owner-card,
.safety-card {
	background: white;
	border-radius: var(--radius-large);
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: var(--shadow-medium);
	border: 1rpx solid var(--border-light);
	transition: all 0.3s ease;
}

.card-header {
	margin-bottom: 25rpx;
	border-bottom: 2rpx solid var(--border-light);
	padding-bottom: 15rpx;
}

.card-title {
	font-size: 28rpx;
	font-weight: bold;
	color: var(--text-primary);
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
}

/* 订单状态卡片 */
.status-header {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
	justify-content: center;
}

.status-badge {
	padding: 10rpx 20rpx;
	border-radius: var(--radius-medium);
	font-size: 24rpx;
	color: white;
	margin-right: 15rpx;
	font-weight: 600;
	box-shadow: var(--shadow-light);
}

.status-badge.pending {
	background: linear-gradient(135deg, #FFF8DC 0%, #FFE4B5 100%);
	color: var(--title-text-color);
}

.status-badge.accepted {
	background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}

.status-badge.in_progress {
	background: linear-gradient(135deg, #2196F3 0%, #0D47A1 100%);
}

.status-badge.completed {
	background: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%);
}

.status-badge.cancelled {
	background: linear-gradient(135deg, #F44336 0%, #C62828 100%);
}

.urgent-tag {
	background: var(--urgent-red);
	color: white;
	font-size: 20rpx;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	font-weight: 600;
	box-shadow: var(--shadow-light);
	animation: pulse 2s infinite;
}

.order-id,
.publish-time {
	font-size: 24rpx;
	color: var(--text-secondary);
	display: block;
	margin-bottom: 8rpx;
	text-align: center;
}

/* 宠物信息卡片 */
.pet-info {
	display: flex;
	margin-bottom: 20rpx;
	align-items: center;
}

.pet-avatar {
	position: relative;
	margin-right: 20rpx;
	transition: transform 0.3s ease;
}

.pet-image {
	width: 130rpx;
	height: 130rpx;
	border-radius: var(--radius-large);
	background: #F0F0F0;
	box-shadow: var(--shadow-medium);
	border: 3rpx solid white;
}

.pet-type-icon {
	position: absolute;
	bottom: -10rpx;
	right: -10rpx;
	width: 45rpx;
	height: 45rpx;
	background: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	border: 2rpx solid var(--primary-color);
}

.pet-details {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pet-name-row {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
	justify-content: space-between;
}

.pet-name {
	font-size: 30rpx;
	font-weight: bold;
	color: var(--text-primary);
	margin-right: 15rpx;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
}

.pet-gender {
	font-size: 24rpx;
	color: var(--title-text-color);
	background: var(--title-bg-color);
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	font-weight: 600;
}

.pet-breed,
.pet-weight {
	font-size: 24rpx;
	color: var(--text-secondary);
	display: block;
	margin-bottom: 8rpx;
}

.pet-traits {
	display: flex;
	flex-wrap: wrap;
	gap: 8rpx;
	margin-top: 10rpx;
	justify-content: center;
}

.trait-tag {
	padding: 6rpx 12rpx;
	background: #E8F5E8;
	color: #4CAF50;
	border-radius: 12rpx;
	font-size: 20rpx;
	font-weight: 500;
	box-shadow: var(--shadow-light);
	transition: all 0.3s ease;
}

.pet-notes {
	padding: 20rpx;
	background: #FFF9E6;
	border-radius: var(--radius-large);
	border-left: 6rpx solid #FFF8DC;
	box-shadow: var(--shadow-light);
}

.notes-title {
	font-size: 24rpx;
	color: var(--title-text-color);
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
}

.notes-content {
	font-size: 24rpx;
	color: var(--text-secondary);
	line-height: 1.5;
}

/* 服务需求卡片 */
.service-title {
	font-size: 26rpx;
	color: var(--text-primary);
	margin-bottom: 20rpx;
	display: block;
	font-weight: 500;
}

.service-list {
	margin-bottom: 20rpx;
	background: var(--bg-tertiary);
	border-radius: var(--radius-medium);
	padding: 10rpx;
}

.service-item {
	display: flex;
	align-items: center;
	padding: 15rpx 0;
	border-bottom: 2rpx solid #F0F0F0;
	transition: all 0.3s ease;
	border-radius: var(--radius-small);
	padding: 15rpx;
}

.service-item:last-child {
	border-bottom: none;
	border-radius: 0 0 var(--radius-small) var(--radius-small);
}

.service-icon {
	font-size: 36rpx;
	margin-right: 20rpx;
	width: 50rpx;
	text-align: center;
	filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
}

.service-info {
	flex: 1;
}

.service-name {
	font-size: 26rpx;
	color: var(--text-primary);
	font-weight: bold;
	display: block;
	margin-bottom: 5rpx;
}

.service-desc {
	font-size: 22rpx;
	color: var(--text-secondary);
}

.service-requirements {
	padding: 20rpx;
	background: #F0F8FF;
	border-radius: var(--radius-large);
	border-left: 6rpx solid #2196F3;
	box-shadow: var(--shadow-light);
}

.requirements-title {
	font-size: 24rpx;
	color: #2196F3;
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
}

.requirements-content {
	font-size: 24rpx;
	color: var(--text-secondary);
	line-height: 1.5;
}

/* 时间地点卡片 */
.time-info {
	margin-bottom: 20rpx;
	background: var(--bg-tertiary);
	border-radius: var(--radius-medium);
	padding: 15rpx;
}

.info-row {
	display: flex;
	margin-bottom: 10rpx;
	align-items: center;
}

.info-label {
	font-size: 24rpx;
	color: var(--text-secondary);
	width: 150rpx;
	font-weight: 500;
}

.info-value {
	font-size: 24rpx;
	color: var(--text-primary);
	flex: 1;
	font-weight: 500;
}

.location-info {
	margin-bottom: 20rpx;
	border-radius: var(--radius-large);
	overflow: hidden;
}

.location-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
	background: var(--bg-tertiary);
	border-radius: var(--radius-medium);
	padding: 15rpx;
}

.location-text {
	font-size: 26rpx;
	color: var(--text-primary);
	flex: 1;
	font-weight: 500;
}

.distance {
	font-size: 22rpx;
	color: var(--title-text-color);
	background: var(--title-bg-color);
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	font-weight: 600;
}

.map-container {
	position: relative;
	height: 200rpx;
	border-radius: var(--radius-large);
	overflow: hidden;
	box-shadow: var(--shadow-medium);
	border: 2rpx solid var(--border-light);
}

.mini-map {
	width: 100%;
	height: 100%;
	border-radius: var(--radius-large);
}

.map-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.map-hint {
	color: white;
	font-size: 24rpx;
	background: rgba(0, 0, 0, 0.5);
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	font-weight: 500;
	box-shadow: var(--shadow-light);
}

/* 报酬信息卡片 */
.payment-info {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
	background: var(--bg-tertiary);
	border-radius: var(--radius-medium);
	padding: 15rpx;
}

.price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 0;
	border-bottom: 1rpx solid var(--border-light);
}

.price-label {
	font-size: 26rpx;
	color: var(--text-primary);
	font-weight: 500;
}

.price-value {
	display: flex;
	align-items: baseline;
}

.price {
	font-size: 36rpx;
	font-weight: bold;
	color: var(--orange-accent);
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.price-unit {
	font-size: 22rpx;
	color: var(--text-secondary);
	margin-left: 5rpx;
}

.payment-method {
	display: flex;
	justify-content: space-between;
	padding: 10rpx 0;
}

.method-label {
	font-size: 24rpx;
	color: var(--text-secondary);
	font-weight: 500;
}

.method-value {
	font-size: 24rpx;
	color: var(--text-primary);
	font-weight: 500;
}

.payment-note {
	padding: 15rpx;
	background: #F0F8FF;
	border-radius: var(--radius-medium);
	box-shadow: var(--shadow-light);
}

.note-content {
	font-size: 22rpx;
	color: var(--text-secondary);
}

/* 主人信息卡片 */
.owner-info {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	background: var(--bg-tertiary);
	border-radius: var(--radius-large);
	padding: 20rpx;
}

.owner-avatar {
	position: relative;
	margin-right: 20rpx;
	transition: transform 0.3s ease;
}

.avatar-image {
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
	background: #F0F0F0;
	box-shadow: var(--shadow-medium);
	border: 3rpx solid white;
}

.verified-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 35rpx;
	height: 35rpx;
	background: #4CAF50;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	border: 2rpx solid white;
}

.owner-details {
	flex: 1;
}

.owner-name {
	font-size: 28rpx;
	font-weight: bold;
	color: var(--text-primary);
	display: block;
	margin-bottom: 8rpx;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
}

.owner-stats {
	display: flex;
	gap: 20rpx;
	margin-bottom: 5rpx;
}

.stat-item {
	font-size: 22rpx;
	color: var(--text-secondary);
	background: var(--bg-primary);
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	box-shadow: var(--shadow-light);
}

.owner-join {
	font-size: 20rpx;
	color: var(--text-tertiary);
}

.contact-actions {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
	margin-left: 20rpx;
}

.contact-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background: #FFF8DC;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-icon {
	font-size: 26rpx;
	color: white;
	font-weight: 600;
}

.owner-reviews {
	padding: 20rpx;
	background: #F9F9F9;
	border-radius: var(--radius-large);
	box-shadow: var(--shadow-light);
	margin-top: 20rpx;
}

.reviews-title {
	font-size: 24rpx;
	color: var(--text-primary);
	font-weight: bold;
	display: block;
	margin-bottom: 15rpx;
}

.review-item {
	margin-bottom: 15rpx;
	padding-bottom: 15rpx;
	border-bottom: 2rpx solid #E0E0E0;
	background: var(--bg-primary);
	border-radius: var(--radius-medium);
	padding: 15rpx;
	box-shadow: var(--shadow-light);
}

.review-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.review-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8rpx;
}

.reviewer-name {
	font-size: 22rpx;
	color: var(--text-secondary);
	font-weight: 500;
}

.review-rating {
	font-size: 20rpx;
	color: var(--title-text-color);
	font-weight: 600;
}

.review-content {
	font-size: 22rpx;
	color: var(--text-secondary);
	line-height: 1.4;
}

/* 安全提示卡片 */
.safety-tips {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
	background: #FFF0F5;
	border-radius: var(--radius-large);
	padding: 20rpx;
	border-left: 6rpx solid #FF6B9D;
}

.tip-item {
	font-size: 24rpx;
	color: var(--text-secondary);
	line-height: 1.5;
	background: var(--bg-primary);
	padding: 10rpx;
	border-radius: var(--radius-medium);
	box-shadow: var(--shadow-light);
}

/* 底部操作栏 */
.bottom-actions {
	display: flex;
	gap: 20rpx;
	padding: 30rpx;
	background: linear-gradient(135deg, white 0%, #FFF8DC 100%);
	border-top: 2rpx solid #E0E0E0;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.btn-contact,
.btn-accept,
.btn-cancel,
.btn-start,
.btn-complete {
	flex: 1;
	height: 85rpx;
	border-radius: var(--radius-large);
	font-size: 28rpx;
	border: none;
	box-shadow: var(--shadow-medium);
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-contact {
	border: 2rpx solid var(--title-bg-color);
	background: white;
	color: var(--title-text-color);
	box-shadow: var(--shadow-medium);
}

.btn-accept,
.btn-start,
.btn-complete {
	background: var(--primary-gradient);
	color: white;
	box-shadow: var(--shadow-heavy);
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.btn-cancel {
	border: 2rpx solid #F44336;
	background: white;
	color: #F44336;
	box-shadow: var(--shadow-medium);
}
</style>